<template>
	<div class="page-container">
		<h1>时间戳转换工具</h1>
		<el-form ref="form" label-width="120px">
			<el-form-item label="Unix 时间戳">
				<el-input v-model="unixTimestamp" type="number" placeholder="请输入 Unix 时间戳"></el-input>
			</el-form-item>
			<el-form-item label="时间">
				<el-date-picker v-model="dateTime" type="datetime" placeholder="选择时间"></el-date-picker>
			</el-form-item>
		</el-form>
		<div class="mt-4">
			<p>结果：<span>{{ result }}</span></p>
		</div>
		<el-button type="primary" @click="convertToDateTime">时间戳转时间</el-button>
		<el-button type="primary" @click="convertToUnixTimestamp">时间转时间戳</el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				unixTimestamp: '',
				dateTime: new Date(),
				result: '',
			}
		},
		methods: {
			convertToDateTime() {
				const unixTimestampInput = parseInt(this.unixTimestamp.trim())
				if (isNaN(unixTimestampInput)) {
					this.$message({
						message: '请输入正确的 Unix 时间戳！',
						type: 'warning'
					})
					return
				}
				const dateTimeString = new Date(unixTimestampInput * 1000).toLocaleString()
				this.result = dateTimeString
			},
			convertToUnixTimestamp() {
				const dateTimeInput = this.dateTime
				if (dateTimeInput === null) {
					this.$message({
						message: '请输入正确的时间！',
						type: 'warning'
					})
					return
				}
				const unixTimestamp = Math.floor(new Date(dateTimeInput).getTime() / 1000)
				this.result = unixTimestamp
			},
		},
	}
</script>
